<template>
  <div class="person-box">
        <header class="person-warp">
            <div class="warp-left">
                <a href="javascript:;">
                    <img src="https://ms0.meituan.com/touch/img/account/login/return_icon.png" alt="返回">
                </a>
            </div>
            <h1 class="warp-title">登录</h1>
            <div class="warp-right">
                <a href="javascript:;">
                    <span>立即注册</span>
                </a>
            </div>
        </header>
        <div class="person-login">
            <ul class="list">
                <li :class="{'active' : isActive == index}" :key="index" v-for="(item,index) in list" @click="changeTab(index)">
                    <a href="javascript:;">{{item}}</a>
                </li>
            </ul>
            <!--验证码登录框  -->
            <form action="" method="get" autocomplete="off" class="normal-login"  v-if="isActive == 0">
                <div class="person-table">
                    <ul class="table-list">
                        <li>
                            <div class="table-content">
                                <img src="https://ms0.meituan.com/touch/img/account/login/icon_signin_phone@2x.png" alt="">
                                <input type="text" class="num" placeholder="请输入手机号">
                                <button>获取验证码</button>
                            </div>
                        </li>
                        <li>
                            <div class="table-content">
                                <img src="https://ms0.meituan.com/touch/img/account/login/icon_phone_check_code@2x.png" alt="">
                                <input type="text" class="num" placeholder="请输入短信验证码">
                            </div>
                        </li>
                        <li>
                            <div class="table-content txt">
                               未注册过的手机将自动注册为美团账户
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="btn-warp">
                    <button class="btn">登录</button>
                </div>
            </form>
            <!--密码登录框  -->
            <form action="" method="get" autocomplete="off" class="normal-login"  v-else >
                <div class="person-table">
                    <ul class="table-list">
                        <li>
                            <div class="table-content">
                                <img src="https://ms0.meituan.com/touch/img/account/login/icon_login_user@2x.png" alt="">
                                <input type="text" class="num" placeholder="美团账户(手机/邮箱/用户名)">
                            </div>
                        </li>
                        <li>
                            <div class="table-content">
                                <img src="https://ms0.meituan.com/touch/img/account/login/icon_login_password@2x.png" alt="">
                                <input type="text" class="num" placeholder="请输入密码">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="btn-warp">
                    <button class="btn">登录</button>
                </div>
                <div class="forget">
                    <a href="javascript:;">忘记密码</a>
                </div>
            </form>
        </div>
        <Footerpage></Footerpage>
  </div>
</template>

<script>
import Footerpage from './Footer.vue';
export default {
    name:'personpage',
    components: {
        Footerpage
    },
    data (){
        return {
            isActive:0,
            list:['手机验证登录','美团账号登录']
        }
    },
    methods: {
        changeTab (index){
            this.isActive = index
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../static/px2rem.scss';
body{
    background-color: #f0efed!important;
}
.person-box{
    .person-warp{
        border-bottom: px2rem(1) solid #eee;
        background-color: #fff;
        height: px2rem(51);
        color: #444;
        position: relative;
        display: flex;
        .warp-left{
            height: px2rem(51);
            line-height: px2rem(51);
            a{  
                display: block;
                padding: 0 px2rem(15);
                width: px2rem(22.5);
                height: px2rem(50);
                img{
                    width: px2rem(10);
                    height: px2rem(18.5);
                    margin-left: px2rem(10);
                    border: 0;
                    vertical-align: middle;
                }
            }
        }
        .warp-title{
            flex: 1;
            display: block;
            font-size: px2rem(18);
            font-weight: 400;
            text-align: center;
            line-height: px2rem(50);
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-left: px2rem(25);
        }
        .warp-right{
            height: 100%;
            margin-right: px2rem(20);
            a{
                display: inline-block;
                width: auto;
                height: 100%;
                line-height: px2rem(50);
                text-align: center;
                margin-right: px2rem(2);
                span{
                    color: #656565;
                }
            }
        }
    }
    .person-login{
        .list{
            display: flex;
            position: relative;
            color: #656565;
            border: 0;
            background-color: #f9f9f9;
            text-align: center;
            .active{
                border:none;
                color: #2f2f2f;
                background-color: #fff;
            }
            li{
                display: block;
                text-align: center;
                flex:1;
                position: relative;
                border-bottom: px2rem(1) solid #DDD8CE;
                a{
                    display: block;
                    padding: 0;
                    height: px2rem(40);
                    line-height: px2rem(40);
                    color: inherit;
                    font-size:px2rem(14)
                }
            }
        }
        .normal-login{
            display: block;
            margin-top: 0;
            .table-list{
                background: #fff;
                padding: 0 px2rem(20);
                .table-content{
                        padding: px2rem(16) 0 px2rem(16) 0;
                        box-sizing: border-box;
                        margin: 0;
                        border-bottom: 1px solid #DDD8CE;
                        overflow: hidden;
                        font-size: inherit;
                        font-weight: 400;
                        position: relative;
                        display: flex;
                    img{
                        display: inline-block;
                        height: px2rem(20); 
                        margin-top: px2rem(-1.5);
                        line-height: px2rem(20);
                        margin-left: px2rem(-0.75);
                        vertical-align: middle;
                        border: 0;
                    }
                    input{
                        border: 0;
                        height: px2rem(30);
                        line-height: 1;
                        margin: px2rem(-7.5) 0;
                        text-indent: px2rem(5);
                        font-size: px2rem(15);
                        border-radius: px2rem(3);
                        padding: 0;
                        outline: none;
                    }
                    .num{
                        display: block;
                        width: 100%;
                        text-indent: px2rem(12);
                        font-size: px2rem(14);
                        background-color: #fff;
                    }
                    button{
                        width: px2rem(100);
                        background-color: #cdcdcd;
                        color: #fff;
                        border: 0;
                        display: block;
                        margin-top: px2rem(-7.5);
                        margin-bottom: px2rem(-7.5);
                        height: px2rem(32);
                        line-height: px2rem(32);
                        font-size: px2rem(14);
                        text-align: center;
                        border-radius: px2rem(3);
                        vertical-align: middle;
                        
                    }
                }
                .txt{
                    color: #898989;
                    font-size: px2rem(12);
                }
            }
            .btn-warp{
                margin: px2rem(12) px2rem(20) px2rem(15);
                .btn{
                    display: block;
                    width: 100%;
                    padding: 0 px2rem(16);
                    text-align: center;
                    height: px2rem(42);
                    line-height: px2rem(42);
                    font-size: px2rem(16);
                    border-radius: px2rem(4);
                    color: rgba(107,69,10,.4);
                    background-color: #fdc900;
                }
            }
            .forget{
                font-size: px2rem(12);
                text-align: right;
                margin-right: px2rem(20);
                display: block;
                a{
                    color: #6b450a;
                }
            }
        }
    }


}


</style>
